<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
      .content {
        padding: 1rem;
        margin-top: 50px;
        font-size: .9rem;
      }

      .content .mui-media-body span:nth-child(1) {
        display: inline-block;
        width: 25%;
      }

      .content .mui-media-body span:nth-child(2) {
        display: inline-block;
        width: 70%;
      }

      .content>img {
        display: block;
        margin: 50px auto 0;
        width: 50px;
      }

      .money {
        text-align: center;
        font-size: 2rem;
        margin: 1rem auto;
        color: orangered;
      }

      .right {
        line-height: 3rem;
        font-size: 1.3rem;
        color: #2AC845;
      }

      .mui-table-view-cell {
        padding: 7px 15px !important;
      }
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">钱包明细</h1>
    </header>
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!--这里放置真实显示的DOM内容-->
        <div class="content">
          <img src="../images/money.png" alt="">
          <div class="money">
            <i class="fa fa-rmb" aria-hidden="true"></i>
            <span>1000.00</span>
          </div>
          <ul class="mui-table-view">
            <li class="mui-table-view-cell">
              <a>
                <div class="mui-pull-left">
                  <p>充值</p>
                  <p>2019-1-3 10:23:43</p>
                </div>
                <div class="mui-pull-right right">100.00</div>
              </a>
            </li>
            <li class="mui-table-view-cell">
              <a>
                <div class="mui-pull-left">
                  <p>充值</p>
                  <p>2019-1-3 10:23:43</p>
                </div>
                <div class="mui-pull-right right">100.00</div>
              </a>
            </li>
            <li class="mui-table-view-cell">
              <a>
                <div class="mui-pull-left">
                  <p>充值</p>
                  <p>2019-1-3 10:23:43</p>
                </div>
                <div class="mui-pull-right right">100.00</div>
              </a>
            </li>

          </ul>
        </div>
      </div>
    </div>
  </body>
  <script src="../js/mui.min.js"></script>
  <script type="text/javascript">
    mui.init()
    mui('.mui-scroll-wrapper').scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    }) // 滚动区域
  </script>
</html>
